<template>
  <div class="kill">
    <div class="goods" v-for="item in goodsList" :key="item.id" @click="godetail(item.id)">
      <img :src="item.image" alt="" />
      <div class="word">
        <span class="title">{{ item.title }}</span>
        <span class="prince">￥{{ item.price }}</span>
        <span class="lastprince">￥{{ item.otPrice }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FxhDemoGoodsView",
  props: ["goodsList"],
  data() {
    return {
      Detils:null,
    };
  },
  created() {
  },
  mounted() {},

  methods: {
    godetail(id){
      this.$router.push({path:"/Details",query:{id:id}})
    }
  },
};
</script>

<style lang="scss" scoped>
.kill {
  box-sizing: border-box;
  @include flex;
  width: 337px;
  padding: 5px;
  overflow-x: scroll;

  .goods {
    width: 92px;
    margin-right: 10px;
    img {
      width: 92px;
      height: 92px;
    }
    .word {
      @include cloumn;
      .title {
        font-size: 11px;
        color: #000;
        margin-top: 6px;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        box-sizing: border-box;
        white-space: nowrap;
      }
      .prince {
        color: #ff448f;
        font-size: 13px;
        height: 100%;
        font-weight: 700;
        margin: 1px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .lastprince {
        font-size: 11px;
        color: #999;
        text-decoration: line-through;
      }
    }
  }
}
</style>
